
<template>
  <section class="bgff p20" style="min-height:100%;">
    <section>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="时间范围">
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-select v-model="formInline.projectName" filterable placeholder="项目名称">
              <el-option label="项目1" value="1"></el-option>
              <el-option label="项目2" value="2"></el-option>
              <el-option label="项目3" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
    </section>
    <section>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="project" label="访问项目" width="180"></el-table-column>
        <el-table-column prop="name" label="操作位置" width="180"></el-table-column>
        <el-table-column prop="phone" label="操作设备"></el-table-column>
        <el-table-column prop="account" label="操作账户"></el-table-column>
        <el-table-column prop="date" label="操作时间"></el-table-column>
      </el-table>
      <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
      </el-pagination>
    </section>
  </section>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "工程管理",
          phone: "PC",
          project:'项目A',
          account:'admin'
        },{
          date: "2016-05-02",
          name: "流量监测",
          phone: "移动端",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "历史报表",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "报警管理",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "监控管理",
          phone: "PC",
          project:'项目A',
          account:'admin'
        },,{
          date: "2016-05-02",
          name: "历史报表",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "报警管理",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "监控管理",
          phone: "PC",
          project:'项目A',
          account:'admin'
        },,{
          date: "2016-05-02",
          name: "历史报表",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "报警管理",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "监控管理",
          phone: "PC",
          project:'项目A',
          account:'admin'
        },,{
          date: "2016-05-02",
          name: "历史报表",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "报警管理",
          phone: "PC",
          project:'项目A',
          account:'调度员A'
        },{
          date: "2016-05-02",
          name: "监控管理",
          phone: "PC",
          project:'项目A',
          account:'admin'
        },
      ],
      value1: "",
      dialogFormVisible:false,
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          radio:''
        },
        formLabelWidth: '120px'
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style lang="less">
</style>
